<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<link href="/ticket-manager/css/c3.css" rel="stylesheet" type="text/css" />
<!-- <script type="text/javascript" src="/ticket-manager/js/jquery-1.6.1.js"></script>
<script type="text/javascript"
	src="/ticket-manager/js/jquery-ui-1.8.11.custom.min.js"></script> -->
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
#continents {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	width: 100%;
	border-collapse: collapse;
}

#continents td,#customers th {
	font-size: 1.2em;
	border: 1px solid #98bf21;
	padding: 3px 7px 2px 7px;
}

#continents th {
	font-size: 1.4em;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 4px;
	background-color: #A7C942;
	color: #fff;
}

#continents tr.alt td {
	color: #000;
	background-color: #EAF2D3;
}
</style>
<script type="text/javascript">

	function deleleContinent(continent_id) {
		$( "#dialog-confirm" ).dialog({
		      resizable: false,
		      height:180,
		      modal: true,
		      buttons: {
		        "Yes": function() {
		        	var url = "delete.do";
		    		var ajaxData = new Object();
		    		ajaxData.id = continent_id;
		    		alert(JSON.stringify(ajaxData));
		    		$.ajax({
		    			type : "post",
		    			url : url,
		    			data : JSON.stringify(ajaxData),
		    			contentType : "application/json; charset=utf-8",
		    			dataType : "json",
		    			success : showMessage
		    		});
		        },
		        Cancel: function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });
	}
	
	function showMessage(result) {
		alert(result.resultState);
		$("#dialog-confirm").dialog( "close" );
	}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello World!</title>
</head>
<body id="homefirst">
	<div id="wrapper">

		<jsp:include page="/utils/header.jsp"></jsp:include>

		<jsp:include page="/utils/leftNav.jsp"></jsp:include>

		<div id="maincontent">
			<table id="continents">
				<tbody>
					<tr>
						<th>ID</th>
						<th>Code</th>
						<th>Name</th>
						<th>Full Name</th>
						<th>Area</th>
						<th></th>
						<th><a href="createtab.do" title="Create">Create</a></th>
					</tr>
					<c:set var="count" value="0" />

					<c:forEach var="continent" items="${continents}">
						<c:choose>
							<c:when test="${count%2 == 1 }">
								<tr class="alt">
							</c:when>
							<c:otherwise>
								<tr>
							</c:otherwise>
						</c:choose>
						<td>${continent.id}</td>
						<td>${continent.code}</td>
						<td>${continent.name}</td>
						<td>${continent.fullName}</td>
						<td>${continent.area}</td>
						<td><a href="edit.do?id=${continent.id}" title="Edit">Edit</a></td>
						<td><a href="#delete"
							onclick="deleleContinent(${continent.id})" title="Delete">Delete</a></td>
						<c:set var="count" value="${count+1}" />
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		<jsp:include page="/utils/footer.jsp"></jsp:include>
	</div>

	<div id="dialog-confirm" style="display: none;"
		title="Delete Continent">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Do you want to
			delete this Continent?
		</p>
	</div>
</body>
</html>
